<template>
   <div style="width:450px;height:350px;border:1px solid #ccc;margin:10px" ref="main"></div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-wordcloud'
export default {
    data(){
        return{
            data:[
                {name:'帅哥',value:32},
                {name:'幽默',value:62},
                {name:'Giles',value:45},
                {name:'美男子',value:89},
                {name:'宅男',value:29},
                {name:'逗逼',value:79},
                {name:'空虚',value:29},
                {name:'帅',value:89},
                {name:'前端',value:89},
            ]
        }
    },
    computed:{
        options(){
            return{
                series:[
                    {
                        type:'wordCloud',
                        data:this.data,
                        sizeRange: [15, 70],//文字范围
                        gridSize: 10, 
                        shape: 'circle',//形状
                        textStyle:{
                            color:function(){
                                return `rgb(${Math.round(Math.random() * 250)},${Math.round(Math.random() * 250)},${Math.round(Math.random() * 250)})`    
                            }
                        }
                    }
                ]
            }
        }
    },
    mounted(){
        const mychart=echarts.init(this.$refs.main)
        setInterval(() => {
            mychart.setOption(this.options)
        }, 500);
    }
}
</script>

<style>

</style>